import React, { Component } from 'react';
import IceContainer from '@icedesign/container';
import { Step, Grid, Input, Button, Feedback } from '@icedesign/base';
import cookie from 'react-cookies'
import {
  FormBinderWrapper,
  FormBinder,
  FormError,
} from '@icedesign/form-binder';
import axios from 'axios';
const { Row, Col } = Grid;
const telPattern = /^(1[\d]{1}[\d]{9})|(((400)-(\d{3})-(\d{4}))|^((\d{7,8})|(\d{4}|\d{3})-(\d{7,8})|(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1}))$)$|^([ ]?)$/;

const sessionid = cookie.load('sessionId');
export default class SimpleFluencyForm extends Component {
  static displayName = 'SimpleFluencyForm';

  static propTypes = {};

  static defaultProps = {};

  constructor(props) {
    super(props);
    this.state = {
      step: 0,
      formValue: {
        uAccount: cookie.load('account'),
        uNickname: '',
        uDepartment: '',
      },
    };
  }

  // ICE: React Component 的生命周期

  componentWillMount() { }

  componentDidMount() { }

  componentWillReceiveProps() { }

  componentWillUnmount() { }

  formChange = (newValue) => {
    this.setState({
      formValue: newValue,
    });
  };

  nextStep = () => {
    this.form.validateAll((error, value) => {
      const baseurl = 'http://39.105.21.199:8989/IPEvaluation/userCommon/updateInfo.do';
      const uNickname = value.uNickname;
      const uDepartment = value.uDepartment;
      const uAccount = value.uAccount;
      const params = new URLSearchParams();
      params.append('sessionId', sessionid);
      params.append('uNickname', uNickname);
      params.append('uDepartment', uDepartment);
      params.append('uAccount', uAccount);
      console.log(uNickname,uDepartment);
      if (!error || error.length === 0) {
        axios.post(baseurl, params)
          .then((res) => {
            // res.data.data.code === 0 ? (
            Feedback.toast.success('修改成功');
            this.setState({ step: this.state.step + 1 });
            // )
            //   :
            //   Feedback.toast.error(res.data.data.msg);
          }).catch((error) => {
            Feedback.toast.error('出错了');
          });
      }
    });
  };

  renderStep = (step) => {
    if (step === 0) {
      const { uAccount, uNickname, uDepartment } = this.state.formValue;
      const initValue = {
        uAccount,
        uNickname,
        uDepartment
      };
      return (
        <IceContainer style={styles.form}>
          <FormBinderWrapper
            ref={(form) => {
              this.form = form;
            }}
            value={initValue}
            onChange={this.formChange}
          >
            <div>
              <Row style={styles.formRow}>
                <Col xxs="5" s="5" l="7" style={styles.formLabel}>
                  <span>姓名：</span>
                </Col>
                <Col s="14" l="12">
                  <FormBinder required message="必填项">
                    <Input
                      name="uNickname"
                      size="large"
                      style={{ width: '100%' }}
                    />
                  </FormBinder>
                  <div style={styles.formErrorWrapper}>
                    <FormError name="uNickname" />
                  </div>
                </Col>
              </Row>
              <Row style={styles.formRow}>
                <Col xxs="5" s="5" l="7" style={styles.formLabel}>
                  <span>单位:</span>
                </Col>
                <Col s="14" l="12">
                  <FormBinder required message="必填项">
                    <Input
                      name="uDepartment"
                      size="large"
                      style={{ width: '100%' }}
                    />
                  </FormBinder>
                  <div style={styles.formErrorWrapper}>
                    <FormError name="uDepartment" />
                  </div>
                </Col>
              </Row>
              <Row>
                <Col offset={7}>
                  <Button onClick={this.nextStep} type="primary">
                    完成
                  </Button>
                </Col>
              </Row>
            </div>
          </FormBinderWrapper>
        </IceContainer>
      );
    } else if (step === 1) {
      return (
        <div className="success-detail" style={styles.successDetail}>
          <IceContainer style={styles.container}>
            <div className="success-detail-head" style={styles.successDetailHead}>
              <img
                src="//img.alicdn.com/tfs/TB1GOHLXyqAXuNjy1XdXXaYcVXa-52-52.png"
                style={styles.img}
                alt=""
              />
              <h3 className="title" style={styles.title}>
                修改成功
            </h3>
            </div>
            <p className="summary" style={styles.summary}>
              本文字区域可以展示简单的说明
          </p>
            <p className="descrpiton" style={styles.descrpiton}>
              如果有跟多细节需要展示，可以补充在下面这里，一些相关的介绍和描述
          </p>
            <div className="buttons" style={styles.buttons}>
              <Button type="normal" style={styles.btn}>
                返回首页
            </Button>
              <Button type="primary">查看更多</Button>
            </div>
          </IceContainer>
        </div>
      );
    }
  };

  render() {
    return (
      <div className="simple-fluency-form">
        <IceContainer>
          <Step current={this.state.step} type="dot">
            <Step.Item key={0} title="填写信息" />
            <Step.Item key={1} title="完成" />
          </Step>
        </IceContainer>
        {this.renderStep(this.state.step)}
      </div>
    );
  }
}

const styles = {
  form: {
    padding: '40px 20px',
  },
  formLabel: {
    textAlign: 'right',
    lineHeight: '1.7rem',
    paddingRight: '10px',
  },
  formRow: {
    marginBottom: '20px',
  },
  formErrorWrapper: {
    marginTop: '5px',
  },
  simpleFluencyForm: {},

  container: {
    padding: '80px 40px',
  },
  btn: {
    marginRight: '6px',
  },
  successDetail: {
    textAlign: 'center',
  },
  successDetailHead: {
    position: 'relative',
  },
  img: {
    Width: '40px',
    height: '40px',
  },
  title: {
    margin: 0,
  },
  summary: {
    marginBottom: '40px',
    fontSize: '14px',
    color: '#666',
  },
  nextStep: {
    margin: '80px 0',
  },
};
